@var userOffice = office.getUserOfficeList(); //用户持有的机构
<div class="layer">
<h3 class="header smaller red">通过选择部门，然后为列出部门的人员分配角色</h3>
		<div class="col-xs-6 col-sm-4 pricing-box">
			<div class="widget-box widget-color-orange">
				<div class="widget-header">
					<h5 class="widget-title bigger lighter">所在部门</h5>
				</div>

				<div class="widget-body">
					<div class="widget-main">
						<ul class="ztree" id="treeOffice"></ul>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xs-6 col-sm-4 pricing-box">
			<div class="widget-box widget-color-blue">
				<div class="widget-header">
					<h5 class="widget-title bigger lighter">待选人员</h5>
				</div>

				<div class="widget-body">
					<div class="widget-main" id="dxuser">
						
					</div>
					<div class="hide" id="addUserBtn">
						<a href="javascript:void(0);" class="btn btn-block btn-primary">
							<i class="ace-icon fa fa-plus bigger-110"></i>
							<span>添加所选人员</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xs-6 col-sm-4 pricing-box">
			<div class="widget-box widget-color-green">
				<div class="widget-header">
					<h5 class="widget-title bigger lighter">已选人员</h5>
				</div>

				<div class="widget-body">
				<form action="${ctxPath!}/role/saveuser" method="post" id="role-user-form">
					<div class="widget-main" id="yxuser">
						@for(user in users){
							<div class="checkbox">
								<label>
									<input class="ace ace-checkbox-2" type="checkbox" name="userIds" value="${user.id!}">
									<span class="lbl"> ${user.name!}</span>
								</label>
							</div>
						@}
					</div>
				</form>
					<div class="hide" id="removeUserBtn">
						<a href="javascript:void(0);" class="btn btn-block btn-success">
							<i class="ace-icon fa fa-trash bigger-110"></i>
							<span>移除人员</span>
						</a>
					</div>
				</div>
			</div>
		</div>
</div>
<#save formId="role-user-form" okText="确认分配" config="true" validId="roleUserForm">
	var userIds = [];
	var yx = $("#yxuser").find("input[type=checkbox]");
	yx.each(function(i,val){
		userIds.push(val.value);
	})
	roleUserForm.config({
		 ajaxpost:{data:{id:${roleId},userIds:userIds.toString()}}
	});
</#save>

<script type="text/javascript">
$(function(){
	var setting = {
		view:{
			selectedMulti : false
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "parentId"
			}
		},
		callback: {
			onClick: onClickNode
		}
	};
	var officeTree = $.fn.zTree.init($("#treeOffice"), setting,${userOffice!});
	var yxuser = ${users}; //初始化已选列表
	var yxList = {},dxList = {};
	for(var i in yxuser){
		yxList[yxuser[i].id] = yxuser[i].name;
	}
	function onClickNode(event, treeId, treeNode) {
		$.post("${ctxPath!}/role/officeuser",{'officeId':treeNode.id},function(data){
			$("#dxuser").empty();
			dxList = {};
			for(var i=0;i<data.length;i++){
				dxList[data[i].id] = data[i].name;
				var isyx = "",isyxText = "";
				if(yxList[data[i].id] != undefined){
					isyx = "disabled checked";
					isyxText = "<span class='badge badge-pink'> 已 选 </span>";
				}
				var str = '<div class="checkbox"><label><input '+isyx+' class="ace ace-checkbox-2" value="'+data[i].id
				+'" type="checkbox" data-mode="add" name="'+data[i].name+'">'+
							'<span class="lbl"> '+data[i].name+'</span>'+isyxText+'</label></div>';
				$("#dxuser").append(str);
			}
			$("#addUserBtn").addClass('hide');
		},"json");
	}
	
	var nodes = officeTree.getNodesByParam("level", 0);
	for(var i=0; i<nodes.length; i++) {
		officeTree.expandNode(nodes[i], true, false, false);
	}
	
	$(document).on('click','.layer input[type=checkbox]',function(){
		var mode = $(this).data("mode");
		if(mode == "add"){
			var ck = $("#dxuser").find("input[type='checkbox']").is(":checked");
			if(ck){
				$("#addUserBtn").removeClass('hide');
			}else{
				$("#addUserBtn").addClass('hide');
			}
		}else if(mode == undefined){
			var ck = $("#yxuser").find("input[type='checkbox']").is(":checked");
			if(ck){
				$("#removeUserBtn").removeClass('hide');
			}else{
				$("#removeUserBtn").addClass('hide');
			}
		}
	});
	
	//添加人员
	$("#addUserBtn").click(function(){
		var ck = $("#dxuser").find("input[type='checkbox']:checked").not("[disabled]");
		ck.each(function(i,val){
			ck.eq(i).attr("disabled","disabled");
			ck.eq(i).parent().append("<span class='badge badge-pink'> 已 选 </span>");
			yxList[val.value] = val.name;
			var str = '<div class="checkbox"><label><input name="userIds" class="ace ace-checkbox-2" value="'+val.value
			+'" type="checkbox"><span class="lbl"> '+val.name+'</span></label></div>';
			$("#yxuser").append(str);
		})
	});
	
	//移除人员
	$("#removeUserBtn").click(function(){
		var ck = $("#yxuser").find("input[type='checkbox']:checked");
		ck.closest('.checkbox').remove();
		ck.each(function(i,val){
			delete yxList[val.value];
			var dx = $("#dxuser").find("input[value='"+val.value+"']");
			dx.removeAttr("disabled").prop("checked",false).siblings(".badge").remove();
		})
		var len = $("#yxuser").children().length;
		if(len == 0) $("#removeUserBtn").addClass('hide');
	});
	
})
</script>